{% load static %}
<p style="text-align: center">
  <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#commentForm" role="button" aria-expanded="false" aria-controls="commentForm">
    Оставить комментарий
  </a>
</p>

<link type="text/css" rel="stylesheet" href="{% static 'css/books/rating.css' %}">

<div class="collapse" id="commentForm">
    <form action="{% url 'add-comment' book_id %}" method="post">

        {% csrf_token %}

        <div class="mb-3">
          <label for="comment-id" class="form-label">Напишите ваше мнение об этой книге</label>
          <textarea class="form-control" required name="text" id="comment-id" rows="3"></textarea>
        </div>
        <div class="rating">
          <input type="radio" id="star5" name="rating" value="5" />
          <label for="star5" title="Отлично"></label>
          <input type="radio" id="star4" name="rating" value="4" />
          <label for="star4" title="Хорошо"></label>
          <input type="radio" id="star3" name="rating" value="3" />
          <label for="star3" title="Нормально"></label>
          <input type="radio" id="star2" name="rating" value="2" />
          <label for="star2" title="Плохо"></label>
          <input type="radio" id="star1" name="rating" value="1" />
          <label for="star1" title="Ужасно"></label>
        </div>

        <button type="submit" class="btn btn-outline-success">
            Отправить
        </button>

    </form>
</div>